<template>
  <div style="height: 100%">
    <el-row>
      <el-col :span="24">
        <el-card header="订单情况">
          <div id="statisticMemberOrder" style="height: 200px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card header="月下单情况">
          <div id="statisticMemberMonthOrder" style="height: 200px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card header="充值情况">
          <div id="statisticMemberTopUp" style="height: 200px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { statisticMemberMonthOrder, statisticMemberOrder, statisticMemberTopUp } from '@a/beauty/statistical'
import { Chart } from '@antv/g2'

export default {
  name: 'statistics',
  components: {
    Chart
  },
  data() {
    return {}
  },
  created() {
    let memberId = this.$route.params.memberId
    this.getStatisticMemberMonthOrder(memberId)
    this.getstatisticMemberOrder(memberId)
    this.getStatisticMemberTopUp(memberId)
  },
  methods: {
    // 根据客户id查询出当前每个订单状态下面的数量
    getstatisticMemberOrder(memberId) {
      statisticMemberOrder(memberId).then(res => {
        const chart = new Chart({
          container: 'statisticMemberOrder',
          autoFit: true,
          height: 200,
          width: 520
        })
        chart.data(res.data)
        chart.scale('value', {
          formatter: (val) => {
            return val
          }
        })
        chart.coordinate('theta', {
          radius: 0.75,
          innerRadius: 0.6
        })
        chart.tooltip({
          showTitle: false,
          showMarkers: false,
          itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        })
        chart.interval().adjust('stack').position('value').color('name').label('value', (value) => {
          return {
            content: (data) => {
              return `${data.name}: ${data.value}`
            }
          }
        }).tooltip('name*value', (item, percent) => {
          return {
            name: item,
            value: percent
          }
        })
        chart.interaction('element-active')
        chart.render()
      })
    },
    // 客户月统计订单
    getStatisticMemberMonthOrder(memberId) {
      statisticMemberMonthOrder(memberId).then(res => {
        const chart = new Chart({
          container: 'statisticMemberMonthOrder',
          autoFit: true,
          height: 500
        })
        // 计算总单量
        let totalOrders = 0
        res.data.forEach(e => {
          totalOrders += e.value
        })
        chart.data(res.data)
        chart.scale({
          name: {
            range: [0, 1]
          },
          value: {
            min: 0,
            nice: true
          }
        })
        chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true
        })
        chart.annotation().text({
          position: ['50%', '50%'],
          content: '总订单',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetY: -20
        }).text({
          position: ['50%', '50%'],
          content: totalOrders,
          style: {
            fontSize: 20,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetX: -10,
          offsetY: 20
        }).text({
          position: ['50%', '50%'],
          content: '单',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetY: 20,
          offsetX: 20
        })
        chart.line().position('name*value').label('value')
        chart.point().position('name*value')
        chart.render()
      })
    },
    // 根据客户id查询出当前客户的消费情况
    getStatisticMemberTopUp(memberId) {
      statisticMemberTopUp(memberId).then(res => {
        const chart = new Chart({
          container: 'statisticMemberTopUp',
          autoFit: true,
          height: 520
        })
        chart.data(res.data)
        chart.tooltip({
          showMarkers: false,
          shared: true
        })
        chart.interval().position('name*value').color('name').adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ])
        chart.interaction('active-region')
        chart.render()
      })
    }
  }
}
</script>

<style scoped>

</style>
